@import "~scss/variables";

$sw-settings-item-text-color: $color-darkgray-200;
$sw-settings-item-hover-text-color: $color-shopware-brand-500;

.sw-settings__card--hero {
    .sw-settings-item {
        color: var(--color-text-primary-default, #2d2e32);
        text-decoration: none;
        display: flex;
        align-items: center;
        margin-left: -8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 140%;

        &.is--disabled {
            opacity: 0.4;
            cursor: default;
            pointer-events: none;
            filter: grayscale(50%);
        }

        .sw-settings-item__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            margin-left: 8px;

            img,
            svg {
                /* Make the following with and height style important to prevent overwrites from third party styles */
                max-width: 16px !important;
                max-height: 16px !important;
                width: 16px !important;
                height: 16px !important;
                object-fit: contain !important;
                object-position: center !important;
            }
        }

        .sw-settings-item__label {
            font-size: $font-size-xs;
            word-break: break-all;
            padding: 8px 0;
        }

        &:hover,
        &:focus-visible {
            border-radius: var(--border-radius-s, 6px);
            background: var(--color-interaction-secondary-hover, #f2f3f8);
        }

        &:focus-visible {
            outline: 2px solid var(--color-border-brand-selected, #0870ff);
            outline-offset: 0;
        }
    }
}
